Many graphics editing applications include a function for slicing up a graphic image into specific regions. Image slicing is a technique used extensively in Web page design. Generally, a graphic artist designs a complete graphic image that will become the Web page. The graphic image may then be sliced up into specific regions to which certain behaviors, code logic, or other functionality may be assigned. If the regions are not sliced up, modifying the design or functionality of the Web page, or selected portions of the Web page is much more difficult. For example, a row of buttons may have rollover functions and links to different Uniform Resource Locators (URL). If the row is maintained in a single graphic image, there would generally be no efficient way, other than complete redesign of the entire image row, in which to modify or change the image along with its associated functionalities.
Typically, when a designer or graphic artist creates content for a Web site, the design is in flux until the final design is approved. One of the difficult things about the continual updating and modification is that every time the graphic is changed or an element is moved or functionality is changed, the slices of the graphic are also changed to correspond to the graphical and/or functional changes. Traditionally, the graphic artists and designers start from scratch on the original source graphic every time a change or modification is made. The designer then redefines the areas that need to be sliced and re-exports each of the separate areas for creation of the HTML table to fit all of the separate slices and image parts.
Current graphics applications, including MACROMEDIA's FIREWORKS™, MACROMEDIA's FREEHAND™, and ADOBE's PHOTOSHOP™, facilitate the ability to draw an object representing a slice in the graphics document, that would then cause that slice area to export as a separate image inside of an HTML document. The slice functionality in the existing graphics applications allow individual slices to be moved around and resized, which adds convenience to the design process. The difficulty in this level of functionality, however, is adjusting slices in a way to create valid or uncomplicated HTML.
If a designer mistakenly causes an overlapping region or a gap between slices, even one only misaligned by one or two pixels, the resulting HTML is far more complicated than if the slice boundaries are exactly aligned. Overlapping slices create problematic complexities. Because the different slices are provided for in different cells of the HTML table, the question arises as to which cell the overlapping portion belongs in the HTML table? Additionally, if both image slices have behaviors, which behavior takes precedence in the overlapping portion when one image slice is rolled-over? This overlap may cause execution of an unexpected behavior. Likewise, unintentional small gaps between slices cause the resulting HTML table and image files to be overly complex. These complicated situations result in complex HTML code for creating an outcome that the user is expecting. The complexity effects the ability for graphics applications to automatically generate HTML to accommodate for the misalignment, and for Web browsers to quickly load and correctly display the HTML page.
FIG. 1 is an illustration of a typical group of slices within graphics document 10. Graphics document 10 includes slices 11–14 bound by slice guides 100–106. FIG. 2 is an illustration of graphics document 10 in which a user, dragging from either of corner handles 200, enlarges slice 12 with portion 201 overlapping into slice 11. Slice 12 has been increased in size by portion 201. However, none of the other slices, including slice 11, have adjusted to match this change leaving the overlapping region between slice 12 and slice 11.